<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 一 防抖函数常用场景
    // scroll事件的滚动触发
    // 搜索框输入事件
    // 表单验证
    // 按钮提交事件
    // 浏览器`窗口缩放,resize事件

    // func: 函数  wait：间隔时间  immediate: 是否立即执行
    function debounce(func, wait, immediate) {
      let timeout, result;

      // 检查func是否为函数
      if (typeof func !== 'function') {
        throw new TypeError('Expected a function');
      }

      // wait如果忘记设置,,默认为0
      wait = wait || 0;
      var debounced = function () {
        // console.log(this);  //=>从中可以测试出this指向的container
        //保存调用者的this
        let _this = this;
        // 解决前面的event指向问题
        let args = arguments;
        // 清空定时器
        if (timeout) clearTimeout(timeout);

        // 如果立即执行
        if (immediate) {
          let callNow = !timeout; // 初始没有定时器
          timeout = setTimeout(() => {
            timeout = null;
          }, wait);
          // 将传入的函数中this指向调用者
          if (callNow) result = func.apply(_this, args);

        } else {
          timeout = setTimeout(function () {
            // console.log(this)  //=>这里面的this指向window，也就是前面的count那的this是指向window
            //但是防抖函数的this应该是指向container
            func.apply(_this, args);
          }, wait)
        }

        return result;
      }


      //添加取消防抖函数功能
      debounced.cancel = function () {

        clearTimeout(timeout);
        timeout = null;
      }
      return debounced;

    }
  </script>
</body>

</html>